<template>
  <div class="personal">
    <div class="top">
        <TopBarVue :text="text" />
    </div>
    <div class="user">
        <van-cell is-link title="头像" />
        <van-cell @click="$router.push('/NameViw')" is-link title="昵称"/>
        <van-cell is-link title="性别" @click="show = true" />
        <van-action-sheet v-model="show" :actions="actions" cancel-text="取消" close-on-click-action @cancel="onCancel" />
        <span class="name">{{(name)}}</span>
        <img class="toux" src="https://image.suning.cn/uimg/cmf/cust_headpic/0000000000_01_240x240.jpg" alt="">
        <div class="box">
            <van-cell is-link title="股东身份认证" />
            <van-cell is-link title="苏宁国际实名认证" />
        </div>
    </div>

  </div>
</template>

<script>
import TopBarVue from '@/components/TopBar.vue';
import { Toast } from 'vant';
import { getUser } from '@/api/index.js'

export default {
    components: {
     TopBarVue
    },
    data() {
        return {
            text: '我的信息',
            name: '888',
            show: false,
            actions: [{ name: '男' }, { name: '女' }],
        }
    },
    methods: {
        onCancel() {
            Toast('取消');
        },
    },
    mounted() {
        let user = sessionStorage.getItem("userid");
        getUser(user).then((ok) => {
            console.log(ok.data.data)
            this.name = ok.data.data[0].username;
        })
    },
}
</script>

<style lang="scss" scoped>
.personal{
    .user{
        .van-cell{
            &:nth-child(1) {
                height: 0.69rem;
            }
        }
        
        position: relative;
        .name{
            position: absolute;
            left:3rem;
            top: 0.83rem;
            font-size: 0.15rem;
            color: #999999;
        }
        .toux{
            position: absolute;
            width: 0.45rem;
            height: 0.45rem;
            top:0rem ;
            left: 2.9rem;
        }
        .box{
            margin-top: 0.14rem;
        }
    }
}
</style>